$(function () {
    //一选择文件就实现文件的上传操作
    $('#feature').on('change', function () {
        //前台  使用formdata + ajax
        var myfile = this.files[0]
        // console.log(myfile.name)
        // console.log(myfile.File)
        var formdata = new FormData()
        formdata.append('img', myfile)
        formdata.append('username', '我的名字叫jack')//测试formdata也可以用来传其他键值对的一个数据
        $.ajax({
            type: "post",
            url: "/uploadFile",
            data: formdata,
            dataType: "json",
            contentType: false,
            processData: false,
            success: function (res) {
                console.log(res)
                if (res.code == 200) {
                    $('.thumbnail').attr('src', '/uploads/' + res.img).show()

                    //将图片名称存储到指定的隐藏域中
                    $('[name = "feature"]').val(res.img)
                } else {
                    //上传失败
                    $('.alert-danger > span').text(res.msg).fadeIn(500).delay(3000).fadeOut(500)
                }
            }

        });
    })

    /**
 * 客户端使用formdata对象把要的数据接收好 放到data里面再传到服务器里面
 * 服务器根据收到的data对象用formidable 把接收到的图片存到本地文件里面，然后取得img路径的名字 响应报文发给客户端
 * 客户端再根据得到的路径创建一个img标签  把得到的路径用img标签渲染出去  这就是预览效果
 */

    //动态加载分类数据  之前在posts里面做过的 动态渲染页面
    $.ajax({
        type: 'get',
        url: '/getAllCate',
        dataType: 'json',
        success: function (res) {
            // console.log(res)
            //生成分类下拉列表动态结构
            var str = '<option value="all">所有分类</option>'
            for (var i = 0; i < res.data.length; i++) {
                str += `<option value="${res.data[i].id}">${res.data[i].name}</option>`
            }
            $('#category').html(str)
        }
    })

    //创建ckeditor富文本框控件替换页面中的textarea 它会创建一个富文本框对象

    CKEDITOR.replace('content')
    let id = common.getParameter(location.search).id
    //点击保存  事件 
    $('.btnsave').on('click', function () {
        //点击保存按钮的时候  收集好所有想要的数据 然后发送ajax请求
        CKEDITOR.instances.content.updateElement()
        //因为富文本插件是覆盖上去的  用户在上面输入内容  原本的文本域textarea的value属性是不会改变的  这个代码就是让里面的内容进行同步
        //  console.log(123)
        console.log($('form').serialize())
        if(id){
            //把url修改成编辑的ajax请求
            opt('/editPostById')
        }else{
            //把url修改成保存的ajax请求
            opt('/addPost')
        }
    })

    //获取到路由器那边的Id 判断有没有Id 有id就是编辑 没id就不管

    // console.log(id)
    if(id){
        //发送编辑渲染页面的请求
        $.ajax({
            type: "get",
            url: "/getPostById?id="+id,
            dataType: "json",
            success: function (res) {
                console.log(res)
                // 根据数据渲染出页面
                //表单元素  隐藏域  
                $('#title').val(res.data.title)
                $('#content').val(res.data.content)
                $('#slug').val(res.data.slug)
                $('.thumbnail').show().attr('src','/uploads/'+res.data.feature)
                $('#category').val(res.data.category_id)
                $('#status').val(res.data.status)

                $('[name="feature"]').val(res.data.feature)

                $('[name="id"]').val(res.data.id)
                $('#created').val(res.data.created)
            }
        });
    }

    //同一个按钮编辑和保存共享
    function opt(url){
        $.ajax({
            type: "post",
            url: url,
            data: $('form').serialize(),
            dataType: "json",
            success: function (res) {
                if (res.code == 200) {
                    alert('成功')
                     location.href = '/admin/posts'
                } else {
                    console.log(res.msg)
                }
            }
        });
    }
})


